function addTagsColor(cardTags){
    // 获取所有的标签元素
    var tags = cardTags.querySelectorAll('.tag');
    // 定义颜色数组
    var colors = ['#000000', '#A1D7B6', '#FEB3B3', '#FFE1E1', '#A9E614', '#E5E0B1'];
    // 循环遍历每个标签元素，并分配对应的颜色
    tags.forEach(function (tag, index) {
        tag.style.backgroundColor = colors[index]; // 设置背景颜色
        tag.style.color = '#000000'; // 设置字体颜色为黑色
    });
    tags[0].style.color = '#FFFFFF';
}

function changeNavs() {
    // 使用排他思想
    nav_demos = document.querySelectorAll('.nav_demo');
    nav_demos[0].style.backgroundColor = '#d2cfcf'

    //初始化列表
    removeCard();
    //添加卡片
    getList(nav_demos[0].textContent)

    // 为每个按钮添加点击事件
    for (var i = 0; i < nav_demos.length; i++) {
        nav_demos[i].onclick = function () {
            // 先移除所有按钮的背景颜色
            for (var j = 0; j < nav_demos.length; j++) {
                nav_demos[j].style.backgroundColor = '';
            }
            //删除所有卡片：
            removeCard();
            //添加卡片
            getList(this.textContent)
            // 设置当前点击按钮的背景颜色
            this.style.backgroundColor = 'rgb(0,0,0,0.1)';
        };
    }
}

//提取json数据中的数据
// 示例 JavaScript 代码

// 定义一个函数来提取一个大分类下的信息并封装为数组
function extractCategoryInfo(categoryName, data) {
    let categoryInfoArray = [];
    if (categoryName in data) {
        const categoryData = data[categoryName];
        for (const key in categoryData) {
            const info = {
                "name": key,
                "url": categoryData[key]["url"],
                "description": categoryData[key]["description"]
            };
            categoryInfoArray.push(info);
        }
    }
    return categoryInfoArray;
}

//获取分类数组
function getNavs() {
    fetch('/file/webSite.json')
        .then(response => response.json())
        .then(data => {
            const categories = Object.keys(data);
            const categoriesArray = categories.map(category => category.replace(/[\[\]']/g, ''));
            console.log(categoriesArray)
            categoriesArray.forEach(category => {
                const navDemo = document.createElement('div');
                navDemo.classList.add('nav_demo');
                navDemo.textContent = category;
                document.querySelector('.nav').appendChild(navDemo);
            });
            // 默认使用第一个按钮：
            changeNavs();
        })
        .catch(error => console.error('Error loading JSON file:', error));
}

//动态删除所有卡片
function removeCard() {
    // 获取包含卡片的容器元素
    const navContent = document.querySelector('.nav_content');

    // 删除所有子节点
    while (navContent.firstChild) {
        navContent.removeChild(navContent.firstChild);
    }
}


//动态添加卡片
function addCard(data) {
    // 获取包含卡片的容器元素
    const navContent = document.querySelector('.nav_content');

    // 遍历数组中的每个对象
    data.forEach(item => {
        // 创建外层 <a> 元素
        const cardLink = document.createElement('div');
        cardLink.classList.add('card');
        cardLink.classList.add('animate');

        // 创建卡片头部元素
        const cardHeader = document.createElement('div');
        cardHeader.classList.add('card_header');
        cardHeader.textContent = item.name;

        // 创建卡片标签元素
        const cardTags = document.createElement('div');
        cardTags.classList.add('card_tags');
        // const tags = ['推荐', '大陆访问', '不限次数', '无需注册', '手机可用', '速度超快'];
        const tags = item.tags;
        
        tags.forEach(tagName => {
            const tag = document.createElement('p');
            tag.classList.add('tag');
            tag.textContent = tagName;
            cardTags.appendChild(tag);
        });

        // 创建卡片介绍元素
        const cardIntroduction = document.createElement('div');
        cardIntroduction.classList.add('card_introduction');
        cardIntroduction.textContent = item.description;

        
        //创建按钮直达网站
        const cardButton = document.createElement('a');
        cardButton.textContent = '点击访问';
        cardButton.setAttribute('href', item.url);
        cardButton.setAttribute('target', '_blank');
        cardButton.classList.add('card_button');

        // 将子元素添加到外层 <a> 元素
        cardLink.appendChild(cardHeader);
        cardLink.appendChild(cardTags);
        cardLink.appendChild(cardIntroduction);
        cardLink.appendChild(cardButton);

        // 将卡片元素添加到容器中
        navContent.appendChild(cardLink);

        
        addTagsColor(cardTags,tags);
    });
}


function getList(type) {
    // 加载JSON文件
    fetch('/file/webSite.json')
        .then(response => response.json())
        .then(data => {
            // 定义一个函数来提取一个大分类下的信息并封装为数组
            function extractCategoryInfo(categoryName, data) {
                let categoryInfoArray = [];
                if (categoryName in data) {
                    const categoryData = data[categoryName];
                    for (const key in categoryData) {
                        const info = {
                            "name": key,
                            "url": categoryData[key]["url"],
                            "tags": categoryData[key]["tags"],  
                            "description": categoryData[key]["description"]
                        };
                        categoryInfoArray.push(info);
                    }
                }
                return categoryInfoArray;
            }

            // 提取AI办公-综合分类下的信息并封装为数组
            categoryInfoArray = extractCategoryInfo(type, data);
            addCard(categoryInfoArray)
        })
        .catch(error => console.error('Error loading JSON file:', error));
}



console.log(getNavs());

console.log(getList(""));
